<template>
	<view>
		<u-skeleton :loading="isFirst" rows="10">
			<view class="box" style="margin-top: 20rpx;">

				<u-tabs :list="list" :itemStyle="{ width: '42%',marginBottom:'20rpx'}" :current="current"
					active-color="#30B1B7" lineColor="red" lineWidth="40" @change="tagChange"></u-tabs>
				<view v-if="current == 0">
                     <view class="content_score" style="border: 1px solid #eee;padding-left: 14rpx;padding-right: 14rpx;margin-bottom: 0;">
                     	<view class="y_cell" style="border-top:none ;">
                     	
                     		<view class="y_cell_left">
                     			<view style="float: left;">
                     				<text class="u-cell-text">刷题时长</text>
                     	
                     	
                     			</view>
                     		</view>
                     	
                     	
                     		<view class="y_cell_right">
                     			<view style="float: left;">
                     	
                     				<view class="y_tag floatright y_tag_bgPrimary mlw"
                     					>
                     					{{data.timeCount==null?'-':data.timeCount}}秒
                     				</view>
                     	
                     				
                     	
                     			</view>
                     	
                     		</view>
                     	
                     	</view>
						
						
						
						<view class="y_cell">
						
							<view class="y_cell_left">
								<view style="float: left;">
									<text class="u-cell-text">交卷时间</text>
						
						
								</view>
							</view>
						
						
							<view class="y_cell_right">
								<view style="float: left;">
						
									<view class="y_tag floatright y_tag_bgPrimary mlw"
										>
										{{data.time}}
									</view>
						
									
						
								</view>
						
							</view>
						
						</view>
						
						
						<view class="y_cell">
						
							<view class="y_cell_left">
								<view style="float: left;">
									<text class="u-cell-text">刷题数量</text>
						
						
								</view>
							</view>
						
						
							<view class="y_cell_right">
								<view style="float: left;">
						
									<view class="y_tag floatright y_tag_bgPrimary mlw"
										>
										{{data.count}}道
									</view>
						
									
						
								</view>
						
							</view>
						
						</view>
						
						
						
						<view class="y_cell">
						
							<view class="y_cell_left">
								<view style="float: left;">
									<text class="u-cell-text">正确数量</text>
						
						
								</view>
							</view>
						
						
							<view class="y_cell_right">
								<view style="float: left;">
						            
									<view class="y_tag floatright y_tag_bgDanger mlw"
									v-if="data.percent<60"
										>
										{{data.rightCount}}道
									</view>
									<view class="y_tag floatright y_tag_bgPrimary mlw"
									v-else
										>
										{{data.rightCount}}道
									</view>
									
						
								</view>
						
							</view>
						
						</view>
						
						
						
						
						<view class="y_cell">
						
							<view class="y_cell_left">
								<view style="float: left;">
									<text class="u-cell-text">正确率</text>
						
						
								</view>
							</view>
						
						
							<view class="y_cell_right">
								<view style="float: left;">
						
									<view class="y_tag floatright y_tag_bgDanger mlw"
									v-if="data.percent<60"
										>
										{{data.percent}}%
									</view>
									<view class="y_tag floatright y_tag_bgPrimary mlw"
									v-else
										>
										{{data.percent}}%
									</view>
						
									
						
								</view>
						
							</view>
						
						</view>
						
						
						
						<view class="y_cell">
						
							<view class="y_cell_left">
								<view style="float: left;">
									<text class="u-cell-text">本周刷题</text>
						
						
								</view>
							</view>
						
						
							<view class="y_cell_right">
								<view style="float: left;">
						
									<view class="y_tag floatright y_tag_bgPrimary mlw"
										>
										{{data.weekCount}}道
									</view>
						
									
						
								</view>
						
							</view>
						
						</view>
						
						
						<view class="y_cell">
						
							<view class="y_cell_left">
								<view style="float: left;">
									<text class="u-cell-text">本月刷题</text>
						
						
								</view>
							</view>
						
						
							<view class="y_cell_right">
								<view style="float: left;">
						
									<view class="y_tag floatright y_tag_bgPrimary mlw"
										>
										{{data.monthCount}}道
									</view>
						
									
						
								</view>
						
							</view>
						
						</view>
						
						
						
						<view class="y_cell">
						
							<view class="y_cell_left">
								<view style="float: left;">
									<text class="u-cell-text">累计刷题</text>
						
						
								</view>
							</view>
						
						
							<view class="y_cell_right">
								<view style="float: left;">
						
									<view class="y_tag floatright y_tag_bgPrimary mlw"
										>
										{{data.totalCount}}道
									</view>
						
								
								</view>
						
							</view>
						
						</view>
						
						
					
                     </view>
					<view class="big_button">
						 <u-button type="primary" @click="selectResolve">查看解析</u-button>
					</view>
				</view>
				
				
				
				
				<view v-if="current == 1">
					<view class="box_top" style="padding-bottom: 10rpx;
												width: 96%;
												margin-left: 2%;
												border: 1px solid #eee;
												margin-top: 10rpx;
												box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);">
						<view style="display: flex;">
							<view class="tops">排名</view>
							<view class="tops">姓名 </view>
							<view class="tops">刷题量</view>
							<view class="tops">正确率</view>
						</view>
					
						<view style="display: flex;" v-for="(item,i) in data.tops" :key="item.id">
							<view class="tops">
									<view class="y_tag floatleft y_tag_bgPrimary mlw" style="margin-left: 70rpx; font-size: 12px;">
										{{i+1}}
									</view>
							</view>
							<view class="tops">
									<view class="y_tag floatleft mlw" style="margin-left: 60rpx; font-size: 12px;">
										{{item.name}}
									</view>
							</view>
							<view class="tops">
									<view class="y_tag floatleft mlw y_tag_bgDanger"
									style="margin-left: 65rpx; font-size: 12px;"
									v-if="data.percent<60"
									>
										{{item.count}}
									</view>
									
									<view class="y_tag floatleft mlw y_tag_bgSuccess"
									style="margin-left: 65rpx; font-size: 12px;"
									v-else
									>
										{{item.count}}
									</view>
							</view>
							<view class="tops">
									<view class="y_tag floatleft mlw y_tag_bgDanger" 
									style="margin-left: 65rpx; font-size: 12px;"
									v-if="data.percent<60"
									>
										{{item.percent}}%
									</view>
									
									<view class="y_tag floatleft mlw y_tag_bgSuccess"
									style="margin-left: 65rpx; font-size: 12px;"
									v-else
									>
										{{item.percent}}%
									</view>
							</view>
						</view>
					
					</view>
				</view>

			</view>
		</u-skeleton>
	</view>
</template>

<script>
	import {
		GetPracticeResult
	} from '../../../api/brush_questions.js';
	export default {
		data() {
			return {
				id: '',
				code: '',
				current: 0,
				list: [{
						name: "本次成绩",
					},
					{
						name: "本周排名",
					}
				],
				data:[],
				isFirst:true
			}
		},
		onLoad(val) {
			this.id = val.id;
		},
		onShow() {
			this.getPracticeResult();
		},
		methods: {
			selectResolve(){
				uni.navigateTo({
					url:"/pages/brush_questions/resolve/resolve?id="+this.id
				})
			},
			/**
			 * 获取当前刷题结果
			 */
			getPracticeResult() {
				GetPracticeResult({
					code: this.id,
				}).then(res => {
					if(res.result==0){
						this.data=res.data;
						this.isFirst=false;
					}
				})
			},
			/**标签页改变事件
			 * @param {Object} index
			 */
			tagChange(index) {
				this.current = index.index;
				//如报错则用this.current = index代替上行
			},
		
		},
	}
</script>

<style>
	.content_score {
		border: 1px solid #eee;
		margin: 16rpx;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
	}
	
	
	
	.tops {
		padding-top: 6rpx;
		/* padding-bottom: 10rpx; */
		flex: 1;
		text-align: center;
		/* margin-top: 5rpx; */
	}
</style>